<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="Login/component/pear/css/pear.css" />
	<link rel="stylesheet" href="Login/admin/css/other/login.css" />
	<link rel="stylesheet" href="Login/admin/css/variables.css" />
</head>

<body>
	<div class="login-page">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg">
				<img class="login-bg-img" src="Login/admin/images/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="http://www.layui-vue.com/assets/logo.685dda16.jpg" alt="" />
								<span>Pear
									Admin 4.0</span>
							</div>
							<div class="top-desc">
								以 超 乎 想 象 的 速 度 构 建 内 部 工 具
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input lay-verify="required" placeholder="账户" autocomplete="off" name="account"
										id="LAY-user-login-username"	class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>

										<input type="password" name="password" value=""
											lay-verify="required|confirmPassword" placeholder="密码" autocomplete="off"
											id="LAY-user-login-password" class="layui-input" lay-affix="eye">
									</div>
								</div>
								<div class="tab-log-verification">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input lay-verify="required" placeholder="验证码" autocomplete="off" value="VBJFQ"
												class="layui-input">
										</div>
									</div>
									<img src="Login/admin/images/captcha.gif" alt=""
										 class="verification-img" />
								</div>
								<div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" name="like1[write]" lay-skin="primary" title="自动登录">
										</div>
									</div>
								</div>
								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login">登 录</button>
								</div>
								<div class="other-login">
									<div class="other-login-methods">
										其他方式
									</div>
									<div class="greenText">注册账号</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="Login/component/layui/layui.js"></script>
	<script src="Login/component/pear/pear.js"></script>
	<script>
		layui.use(['form', 'button', 'popup', 'jquery'], function () {
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
			let $ = layui.jquery;

			// 登 录 提 交
			form.on('submit(login)', function (data) {
				var account = data.field.account;
				var password = data.field.password;
				//var captcha = data.field.captcha;

				// 验证
				if (account === '' || password === '' ) {
					layer.msg("请输入用户名或密码");
					return false;
				}

				// 使用 AJAX 进行登录
				$.ajax({
					url: 'user_login',
					type: 'POST',
					data: {
						account: account,
						password: password,
					},
					success: function (res) {
						if (res.code == 200){
							button.load({
								elem: '.login',
								time: 1500,
								done: function () {
									popup.success("登录成功", function () {
										// 1.获取登录的用户
										let user = res.data ;

										// 2.把登录用户存储到 sessionStorage
										sessionStorage.setItem("userinfo",JSON.stringify(user)) ;

										//3.跳转主界面地址
										//location.href = "/项目名/admin/testmain.html"
										location.href = "./testmain.html"
										return ;
									});
								}
							})
						}
						// 登录失败
						layer.msg(res.msg);
					}
				});

			});


		});
	</script>
</body>

</html>
